<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title> - jsFiddle demo</title>

<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.3.min.js'></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js"></script>

<link rel="stylesheet" type="text/css" href="/css/normalize.css"/>
<link rel="stylesheet" type="text/css" href="/css/result-light.css"/>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"/>

<style type='text/css'>
    .draggable { 
        width: 100px;
        height: 200px;
        padding: 0.5em;
        float: left;
        margin: 10px 10px 10px 0;
        background-color: green;
    }
    .droppable { 
        width: 150px;
        height: 150px;
        padding: 0.5em;
        float: left;
        margin: 10px; 
    }
    .clear {clear: both;}
  </style>

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$(function() {
    $(".draggable").draggable();
    $(".droppable").droppable({
        drop: function(event, ui) {
            $(this).addClass("ui-state-highlight").find("p").html("Dropped!");
        },
        over: function(event, ui) {
            $('.display').html( this.id );
        }
    });
});
});//]]>  

</script>


</head>
<body>
    <div class="demo">

    ID of target: <span class="display"></span>
    <br>

    <div id="drag1" class="draggable ui-widget-content">
	<p>Drag me to my target</p>
	<form>
	Select your favorite fruit:
		<select>
			<option id="apple">Apple</option>
			<option id="orange">Orange</option>
			<option id="pineapple" selected="selected">Pineapple</option>
			<option id="banana">Banana</option>
		</select>
	</form>
	<button type="button">Select Orange</button>
    </div>

    <div id="drag2" class="draggable ui-widget-content">
        <p>Drag me to my target</p>
    </div>

    <br class="clear">

    <div id="droppable1" class="droppable ui-widget-header">
        <p>Drop here</p>
    </div>

    <div id="droppable2" class="droppable ui-widget-header">
        <p>Drop here</p>
    </div>

    </div>
  
</body>


</html>

